<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Logon</title>
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/main/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/main/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/main/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/main/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script src="resources/main/js/jquery-1.9.1.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/jquery-ui-1.10.1.custom.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/bootstrap.min.js" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/paging.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/sorttable.js"></script>
<script src="resources/main/js/bloglogon.js" type="text/javascript"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/typeahead.bundle.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.min.js"></script>

<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.extensions.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.date.extensions.js"></script>
<style type="text/css" rel="stylesheet">
table {
	color: black;
	font-size: 13px;
}

label {
	color: black;
}

th, td {
	text-align: center;
}
</style>

</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%">
						<div class="module message">
							<div class="module-head">
								<h3>Logon Blog Management</h3>
							</div>

							<div class="module-option clearfix">
								<div>
									<div class="input-append pull-left">
										<input type="text" class="span3" name="name"
											placeholder="Search By Name..." id="txtname"
											autocomplete="off" spellcheck="false">
										<button type="submit" class="btn" onclick="searchbasic();">
											<i class="icon-search"></i>
										</button>
									</div>

									<a id="btnShowAdvanceSearch"
										style="float: left; padding-left: 10px; padding-right: 10px; padding-top: 5px">Advance
										Search</a>
									<div class="pull-right">
										<a href="javascript:;" class="btn btn-primary"
											onclick="printPage('contentReport');">Print</a> <a
											id="btnExportPDF" href="javascript:;" onclick="exportPDF();"
											class="btn btn-primary">Export PDF</a>
									</div>
								</div>

								<br> <br>
								<div id="panelAdvanceSearch"
									style="text-align: left; display: none;">
									<div style="display: block">
										<div class="" style="width: 220px; float: left">
											<label for="">Username: </label>
											<div class="controls row-fluid">
												<input class="span12" type="text" placeholder="Username"
													id="username">
											</div>
										</div>
										<div class=""
											style="width: 220px; float: left; margin-left: 30px">
											<label class="control-label" for="basicinput">Role:</label> <select
												tabindex="1" data-placeholder="" class="span8"
												style="width: 220px;" id="cmbRole">
												<option value="">All</option>
												<option value="User Admin">User Admin</option>
												<option value="User Support">User Support</option>
												<option value="Account Admin">Account Admin</option>
												<option value="Account Support">Account Support</option>
												<option value="Report Suppor">Report Support</option>
											</select>
										</div>
									</div>
									<div style="display: block; clear: both">
										<div class="" style="width: 220px; float: left;">
											<label for="">Date Range: </label>  <div class="form-group">
                                        <div class="input-group">
                                            <input id="datefrom" type="text" placeholder="From" class="form-control" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask/>
                                        </div>
                                    </div>
										</div>
										<div class=""
											style="width: 220px; float: left; margin-left: 30px;">
											<label for="" style="color: white">invisible</label><input id="dateto" type="text" placeholder="To" class="form-control" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask/>
										</div>
									</div>
									<div class="" style="clear: both">
										<div class="controls clearfix">
											<button type="submit" class="btn btn-primary pull-left"
												style="margin-left: 15px;" onclick="searchadvanced();">Search</button>
											<button type="reset" class="btn btn-primary pull-left"
												style="margin-left: 15px;">Clear</button>
											<button type="button" id="btnHideAdvanceSearch"
												class="btn btn-primary pull-left" style="margin-left: 15px;">Hide</button>
										</div>
									</div>
								</div>
							</div>
							<div class="module-body table" id="tableContent">
								<table class="table table-striped table-hover sortable"
									id="mytable">
									<thead>
										<tr>
											<th>#</th>
											<th data-sortable="true">Username</th>
											<th data-sortable="true">Full Name</th>
											<th data-sortable="true">Role</th>
											<th data-sortable="true">Task</th>
											<th data-sortable="true">Time</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
						<div class="module-foot">
							<!--/.content-->
						</div>
					</div>
				</div>
				<!--/.content-->
			</div>
			<!--/.span9-->
		</div>
	</div>

	<!--/.container-->
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
	
	<script type="text/javascript">
            $(function() {
                //Datemask dd/mm/yyyy
                $("#datemask").inputmask("dd-mm-yyyy", {"placeholder": "dd-mm-yyyy"});
                //Money Euro
                $("[data-mask]").inputmask();})
                </script>
	
</body>

<!-- START PRINT -->
<div align="center" id="contentReport"
	style="visibility: hidden; display: inline;">


	<div class="container"
		style="width: 100%; padding-right: 0px; margin-left: 0%; height: 7%; background-color: gainsboro;">
		<a class="" data-toggle="collapse"
			data-target=".navbar-inverse-collapse"> </a>
		<p class="brand"
			style="padding-left: 150px; color: black; font-size: 36px; font-style: italic; margin-top: 2%">CSC
			Vietnam eBanking</p>
		<!-- /.nav-collapse -->
	</div>
	<br> <br>
	<h3 align="center">Report Login - Logout</h3>
	<div class="module-body table">
		<table class="table table-striped table-hover" id="tblReport">
			<thead>
				<tr>
					<th>#</th>
					<th>Username</th>
					<th>Full Name</th>
					<th>Role</th>
					<th>Task</th>
					<th>Time</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>

</div>
<!-- END PRINT -->


</html>
